<!doctype html>  
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        
        <title>Lab 19 Juin (2)</title>

        <meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
        <meta name="author" content="Hakim El Hattab">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        

        <link rel="stylesheet" href="media/css/mainreveal.css">

        <link rel="stylesheet" href="lib/zenburn.css">
    </head>
    
    <body>
        
        <div class="reveal">

            <!-- Used to fade in a background when a specific slide state is reached -->
            <div class="state-background"></div>
            
            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
			    <section>
					<img src="media/images/slides/html5-wow_610x351.jpg" height="100%" /><br/>
				</section>
				
				<section>
					<img src="media/images/slides/HTML5_Logo_512.png" width="100" /><br/>
					<img src="media/images/slides/arrow-9547_640.png" width="30" /><br/>
					<img src="media/images/slides/multi-platform-pic.jpg" width="100%" /><br/>
				</section>
				
				<section>
					Intégrer avec PhoneGap:
					<img src="media/images/slides/html5ToNative.png" height="80%" />
				</section>
				
				<section>
					PhoneGap Accès aux fonctionnalités native en HTML5 :
					<img src="media/images/slides/supportedFeatPhonGap.png" width="80%" /><br/>
				</section>
				
				<section>
				   Exemple: accès à la caméra
				   <img src="media/images/slides/phoneGapCameraExample.png" width="100%" /><br/>
				</section>
				
				<section>
					<p>
						Avantages HTML5 VS Native:
						<ul>
							<li> Unicité du code </li>
							<li> Référencement </li>
							<li> Instantanéité </li>
						</ul>
					</p>
				</section>
			
				<section>
                   <img src="media/images/slides/future-html5.png" width="100%" /><br/>
                </section>
				
                <section>
					<h4>jQuery Mobile to the rescue</h4>
                   <img src="media/images/slides/tankJump.jpg" width="100%" /><br/>
                </section>
				
			    <section>
				   <h1>jQuery Mobile</h1>
                   <img src="media/images/slides/jquery-logo.png"/><br/>
                </section>
				
			    <section>
                   jQuery Mobile<br/>
                   <img src="media/images/slides/arrow_up.png" height="50" /><br/>					
					jQuery <br/><code contenteditable>$("bloc1").height(200); </code><br/>
                   <img src="media/images/slides/arrow_up.png" height="50" /><br/>					
					JavaScript <br/><code contenteditable>document.getElementById("bloc1").height = 200;</code>
                </section>
				
				<section>
                   <img src="media/images/slides/jquery-mobile-framework1.jpg"  height="100%" /><br/>
                </section>
				
				<section>
                   <img src="media/images/jqueryMobileSlides/jquerymobil-00013.jpg" height="100%" /><br/>
                </section> 

                <section>
                   <img src="media/images/jqueryMobileSlides/jquerymobil-00015.jpg" height="100%" /><br/>
                </section> 				

                <section>
                   <img src="media/images/jqueryMobileSlides/jquerymobil-00016.jpg" height="100%" /><br/>
                </section>
				
                <section>
                   <img src="media/images/jqueryMobileSlides/jquerymobil-00022.jpg" height="100%" /><br/>
                </section>
				
				<section>
                   <img src="media/images/jqueryMobileSlides/jquerymobil-00024.jpg" height="100%" /><br/>
                </section>
								
                <section>
					<a href="http://www.inpixelitrust.fr/caweb/jqm/demos/" target="_blank">
                      Jquery Mobile code
					</a>                   
                </section>				

                <section>
                   <img src="media/images/slides/lien2pages.PNG" height="100%" /><br/>
                </section>
				
				<section>
				   Résumé de jQuery Mobile UI :
                   <a href="http://jquerymobile.com/designs/">
					   http://jquerymobile.com/designs/
				   </a>
                </section>
				
			   <section>
                   <h1>API</h1>
				   
                </section>
						 
				<section>
                   <h4>Configure default</h4>
                   <pre>
$(document).bind("mobileinit", function(){
    $.mobile.foo = bar;
});
                   </pre>
                   $.mobile object:<br/>
                     <ul>
                         <li><span class="attribute">ajaxEnabled</span> boolean, default: true</li>
                         <li><span class="attribute">defaultPageTransition</span> string, default: 'fade'</li>
                         <li><span class="attribute">pageLoadErrorMessage</span> string, default: "Error Loading Page"</li>
                         <li><span class="attribute">pushStateEnabled</span>  boolean, default: true</li>   
					 </ul>     
                </section>
				
				<section>
                   <h4>Events</h4>
                     <ul>
                         <li><span class="attribute">tap / taphold</span></li>
                         <li><span class="attribute">swipe / swipeleft / swiperight</span></li>
                         <li><span class="attribute">orientationchange</span></li>
						 <li><span class="attribute">scrollstart / scrollstop</span></li>
						 <li>Load: <span class="attribute">pagebeforechange / pagebeforeload</span></li>
						 <li>Transitions: <span class="attribute">pagebeforeshow / pagebeforehide </span> </li> 
						 
                     </ul>     
                   
                   
                </section>
				
				<section>
                   <h4>Methods</h4>
                   <pre>
$.mobile.changePage( "searchresults.php", {
    type: "post",
    transition: "flip",					   
    data: $("form#search").serialize()
});
                   </pre>
                </section>
				
				<section>
                    <h4>Les limites de JQM</h4>
                </section>  
				
				<section>
                   <h2>2. Mobile / Web development Practices</h2>
                </section>
				
                <section>
				   <h4>2. Mobile / Web development Practices</h4>
                   <ul>
					   <li>Responsive Design</li>
					   <li>Css animations</li>
					   <li>Less</li>
					   <li>User Experience</li>
				   </ul>
                </section>								
				
				<section>
					<h4>Responsive Design</h4>
					<img src="media/images/slides/multi-platform-pic.jpg" height="60%"/>
				</section>
				
				<section>
                    <a href="http://mattkersley.com/responsive/?http://localhost:8080/responsiveDesign" target="_blank" >
						Démo responsive design
					</a>
					<pre>
@media (max-width: 320px) {
#news div {
   color: blue;
   width: 50%;
 }
}
		   
@media (min-width: 320px) and (max-width: 480px) {
#news div {
   color: red;
   width: 33%;
 }
}

@media (orientation: portrait) {
 #menu {
  display: box;
  box-orient: horizontal;
 }
}

@media (orientation: landscape) {
 #menu {
  display: box;
  box-orient: vertical;
 }
}						
</pre>												
                </section>
				
                <section>
					<h4>Image loading resolution</h4>
					<ul>
						<li>iPhone 3: 480 * 320</li>
					    <li>iPhone 4: 960 * 640 (écran Retina)</li>
						<li>Galaxy Tab: 1280 * 800</li>
						<li>Nouvel iPad: 2 048 * 1 536 (écran Retina)</li>
					</ul>	
                </section>				
				
			    <section>
                    <h4>Image loading resolution</h4>
                   <pre>
< img src='loader.gif' data-src='image1' data-ext='jpg'/>
< img src='loader.gif' data-src='image2' data-ext='jpg'/>
< img src='loader.gif' data-src='image3' data-ext='jpg'/>					   
< script>
document.ready(
  function() {
  	$('img').each(
	  function() {
		this.src = this.attr('data-src') +
			device.height + '*' +
			device.width + '.' + this.attr(data-ext)	
	  }
	)
  }
)
< /script>	
                   </pre>
					iPhone4: < img src='image940*640.jpg'/><br/>
					Nouvel iPad < img src='image2048*1536.jpg'/>
                </section>

                <section>
					<h4>Flexible Box Layout</h4>
<table><tr>
	<td>
<pre>
< script>
body {
  display: box;
  box-orient: horizontal;
}
#box1 {box-flex: 2;}
#box2 {box-flex: 1;}
#box3 {box-flex: 1;}
< /script>
</pre>
<img src="media/images/slides/exemple4.png"/>
</td>
    <td>
<pre>
< script>
body {
  display: box;
  box-orient: vertical;
  box-direction : reverse;
}
#box1 {box-ordinal-group: 2;}
#box2 {box-ordinal-group: 2;}
#box3 {box-ordinal-group: 1;}
< /script>
</pre>
<img src="media/images/slides/exemple3.png"/>
</td>
</tr></table>
					</section>
				
					<section>
						<h1>CSS3 animation</h1>						
					</section>								
				
					<section>
					   <img src="media/images/slides/css3animations.jpg" height="100%"/>
					</section>
				
					<section>
						<style type="text/css">
							@-webkit-keyframes loadingBar {
 								 from {
								   background-position: 0 ;
								  }
								  to {
                                    background-position: 400px;
								  }
						    }
							#anim1 {
							  -webkit-animation: loadingBar 3s linear infinite;
							  width:400px;
							  color: red;
  							  display:inline-block;
                              background-image: -webkit-linear-gradient(right, white, red);
							}
							#anim2 {
                              -webkit-animation: loadingBar 4s linear infinite;
							  width:400px;
    						  display:inline-block;  
							  color: red;
                              background-image: -webkit-linear-gradient(-45deg,rgba(255, 154, 26, 1) 25%,transparent 25%,transparent 50%,rgba(255, 154, 26, 1) 50%,rgba(255, 154, 26, 1) 75%,transparent 75%,transparent);
                            }
							pre b {
							  color: violet;
							}
						</style>
						
                        <div id="anim1">Loading Bar #anim1</div>
						
						<div id="anim2">Loading Bar #anim2</div>
						<pre>							
@-webkit-keyframes <b>myLoadingBar</b> {
  from {
    background-position: 0 ;
  }
  to {
    background-position: 400px;
  }
}
#anim1 {
  -webkit-animation: <b>myLoadingBar</b> 3s linear infinite;
  width:400px;
  background-image: -webkit-linear-gradient(right, white, red);
}
#anim2 {
  -webkit-animation: <b>myLoadingBar</b> 3s linear infinite;
  width:400px;
  background-image: -webkit-linear-gradient(-45deg,rgba(255, 154, 26, 1) 25%,transparent 25%,transparent 50%,rgba(255, 154, 26, 1) 50%,rgba(255, 154, 26, 1) 75%,transparent 75%,transparent);
}							
																					
						</pre>
						
						
                    </section>
				
    				<section>
						<h4>Plus d'animations en CSS3</h4>
					  <ul>
						  <li>
							<a href="http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript" target="_blank">
                              Horloge en CSS3
                            </a>  
						  </li>
						  <li>
							<a href="http://jsrun.it/GeckoTang/4rXg/" target="_blank">
                              Jeu en CSS3
						    </a>
						  </li>
				     </ul>
						
					    
    				</section>
				
			        <section>
                        <h1>LESS<h1>
                        <h4> The dynamic stylesheet language</h4>
                    </section>
                            
                    <section>
                          <img src="media/images/slides/LessExplanation.png" height="100%"/>
                    </section>

                    <section>
                          <h4>Exemples</h4>
                          <img src="media/images/slides/LessExemples.png"  height="100%"/>
                    </section>							

					<section>
						  <h4>Variables</h4>
                          <img src="media/images/slides/LessVariables.png"/>
                    </section>

	                    <section>
                          <h4>Mixins</h4>
                          <img src="media/images/slides/LessMixins.png"/>
                    </section>
					
				    <section>
                          <h4>Hierarchie</h4>
                          <img src="media/images/slides/LessHierarchie.png"/>
                    </section>		

					<section>
						<h4>fonction & calculs</h4>
                        <img src="media/images/slides/LessMethods.png"/>
					</section>	

                    <section>
                        <h1>Optimiser Web</h1>
                    </section>
							
					<section>
						<h4>Vérifier les performances de votre page:</h4>
						<a href="https://developers.google.com/speed/pagespeed/">
							https://developers.google.com/speed/pagespeed/
					    </a>
					</section>
				
					<section>
						<h4>Convertir les images en base64</h4>
						<a href="http://webcodertools.com/imagetobase64converter">
						  Image converter
						</a>
					</section>
				
					<section>
                        <h4>User Experience: Secrets d'Instagram</h4>
                        
                    </section>
							
                    <section>
                        <h4>Répondre instantanément à l'utilisateur</h4>
						<img src="media/images/slides/postNoLiked.png" height="70%"/>
						<img src="media/images/slides/postLiked.png" height="70%"/>
                    </section>
							
					<section>
                        <h4>Secret pour un design rapide et performant</h4>
                        <img src="media/images/slides/quickupload.png" height="90%"/>
                    </section>
							
					<section>
                        <h4>Démo</h4>
                        <a href="http://labappjune2.appspot.com" target="_blank">
							labappjune.appspot.com
						</a>
                    </section>		

                    <section>
                        <h4>Autres solutions:</h4>
                        <ul>
							<li><a href="http://www.sencha.com/products/touch">Sencha Touch</a></li>
							<li><a href="https://trigger.io/">Trigger</a></li>
						</ul>
                    </section>
														
                    <section>
                        <h4>Conclusion</h4>
                        
                    </section>
														
            </div>

            <!-- The navigational controls UI -->
            <aside class="controls">
                <a class="left" href="#">&#x25C4;</a>
                <a class="right" href="#">&#x25BA;</a>
                <a class="up" href="#">&#x25B2;</a>
                <a class="down" href="#">&#x25BC;</a>
            </aside>

            <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
            <div class="progress"><span></span></div>
            
        </div>

        <!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
        <script src="media/js/lib/highlight.js"></script>
        <script src="media/js/lib/classList.js"></script>
        
        <script src="media/js/reveal.js"></script>
        
        <script>
            // Parse the query string into a key/value object
            var query = {};
            location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
                query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
            } );

            // Fires when a slide with data-state=customevent is activated
            Reveal.addEventListener( 'customevent', function() {
                alert( '"customevent" has fired' );
            } );

            // Fires each time a new slide is activated
            Reveal.addEventListener( 'slidechanged', function( event ) {
                // event.previousSlide, event.currentSlide, event.indexh, event.indexv
            } );

            Reveal.initialize({
                // Display controls in the bottom right corner
                controls: true,

                // Display a presentation progress bar
                progress: true,

                // If true; each slide will be pushed to the browser history
                history: true,

                // Loops the presentation, defaults to false
                loop: false,

                // Flags if mouse wheel navigation should be enabled
                mouseWheel: true,

                // Apply a 3D roll to links on hover
                rollingLinks: true,

                // UI style
                theme: query.theme || 'default', // default/neon

                // Transition style
                transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
            });

            hljs.initHighlightingOnLoad();
        </script>

    </body>
</html>